<script setup lang="ts">
import { CarryOutOutlined, SmileTwoTone } from '@ant-design/icons-vue';
import type { TreeProps } from 'ant-design-vue';
import { ref } from 'vue';

const treeData = ref<TreeProps['treeData']>([
  {
    title: '首页',
    key: '0-0',
    children: [
      { title: '工作台', key: '0-0-0-0' },
      { title: '个人设置', key: '0-0-0-2' },
    ],
  },
  {
    title: '用户管理',
    key: '0-1',
    children: [
      { title: '用户信息', key: '0-1-0-0' },
      { title: '组织信息', key: '0-1-0-1' },
    ],
  },
]);
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info);
};
</script>

<template>
  <div>
    <a-tree
        :show-line="true"
        :show-icon="true"
        :default-expanded-keys="['0-0']"
        :tree-data="treeData"
        @select="onSelect"
    >
      <template #icon><carry-out-outlined /></template>
      <template #title="{ dataRef }">
        <template v-if="dataRef.key === '0-0-0-1'">
          <div>multiple line title</div>
          <div>multiple line title</div>
        </template>
        <template v-else>{{ dataRef.title }}</template>
      </template>
      <template #switcherIcon="{ dataRef, defaultIcon }">
        <SmileTwoTone v-if="dataRef.key === '0-0-2'" />
        <component :is="defaultIcon" v-else />
      </template>
    </a-tree>
  </div>
</template>

<style scoped>
</style>
